<template>
  <div id="detaiWarp" class="slide">
		<!-- <header id="header">
			</i><h1>影片详情</h1>
		</header> -->
        <Header title="影片详情">
            <i class="iconfont icon-right" @click="back"></i>
        </Header>
		<!-- <div id="content" class="contentDetail">
			<div class="detail_list">
				<div class="detail_list_bg"></div>
				<div class="detail_list_filter"></div>
				<div class="detail_list_content">
					<div class="detail_list_img">
						<img src="/images/movie_1.jpg" alt="">
					</div>
					<div class="detail_list_info">
						<h2>无名之辈</h2>
						<p>A Cool Fish</p>
						<p>9.2</p>
						<p>剧情,喜剧,犯罪</p>
						<p>中国大陆 / 108分钟</p>
						<p>2018-11-16大陆上映</p>
					</div>
				</div>
			</div>
			<div class="detail_intro">
				<p>在一座山间小城中，一对低配劫匪、一个落魄的泼皮保安、一个身体残疾却性格彪悍的残毒舌女以及一系列生活在社会不同轨迹上的小人物，在一个貌似平常的日子里，因为一把丢失的老枪和一桩当天发生在城中的乌龙劫案，从而被阴差阳错地拧到一起，发生的一幕幕令人啼笑皆非的荒诞喜剧。</p>
			</div>
			<div class="detail_player swiper-container">
				<ul class="swiper-wrapper">
					<li class="swiper-slide">
						<div>
							<img src="/images/person_1.webp" alt="">
						</div>
						<p>陈建斌</p>
						<p>马先勇</p>
					</li>
				
				
				</ul>
			</div>
		</div> -->
			<div id="content" class="contentDetail">
			<div class="detail_list">
				<div class="detail_list_bg"></div>
				<div class="detail_list_filter"></div>
				<div class="detail_list_content" >
					<div class="detail_list_img">
						<img :src="detailMovie.img | formatImg('108.150')" alt="">
					</div>
					<div class="detail_list_info">
						<h2>{{detailMovie.nm}}</h2>
						<p>{{detailMovie.enm}}</p>
						<p>{{detailMovie.sc}}</p>
						<p>{{detailMovie.cat}}</p>
						<p>{{detailMovie.src}} / {{detailMovie.dur}}分钟</p>
						<p>{{detailMovie.pubDesc}}</p>
					</div>
				</div>
			</div>
			<div class="detail_intro">
				<p>{{detailMovie.dra}}</p>
			</div>
			<div class="detail_player swiper-container" ref="detail_player">
				<ul class="swiper-wrapper">
					<li class="swiper-slide"  v-for="(item,index) in detailMovie.photos" :key="index">
						<div>
							<img :src="item | formatImg('140.127')" alt="">
						</div>
						
					</li>
				
				
				</ul>
			</div>
		</div>
      
      
	</div>
</template>

<script>
//导入header
import Header from "@/components/Header";
import { constants } from 'crypto';

export default {
    name:"detail",//命名组件,
    components:{
        Header,
      
	},
	data(){
		return{
			detailMovie:{}
		}
	},
	//获取路由传参
	props:["id"],
    methods:{
        back(){
            // this.$router.push("/movie")//编程时导航
			this.$router.back()//返回上一页
			
        }
	},
	mounted(){
		this.axios.get('/api/detailmovie?movieId='+this.id).then(res=>{
			if(res.data.msg==='ok'){
				this.detailMovie = res.data.data.detailMovie;
				// .this.$nextTick()这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再render出来
				this.$nextTick(()=>{
					
					new Swiper(this.$refs.detail_player, {
						slidesPerView : 'auto',
						freeMode : true,
						freeModeSticky: true
						});
				})
			}
		})
	
		
	}
	
}
</script>

<style scoped>
#detaiWarp{width: 100%;position: absolute;top: 0;left: 0;z-index: 100;min-height: 100%;background-color: #fff;}
#detaiWarp.slide{
	animation: 0.3s slide;
}
@keyframes slide{
	0%{transform: translateX(100%);}
	100%{transform: translateX(0);}
}
#content.contentDetail{ display: block; margin-bottom:0;}
#content .detail_list{ height:200px; width:100%; position: relative; overflow: hidden;}
.detail_list .detail_list_bg{ width:100%; height:100%; background: url(/images/movie_1.jpg) 0 40%; filter: blur(20px); background-size:cover; position: absolute; left: 0; top: 0;}
.detail_list .detail_list_filter{ width:100%; height:100%; position: absolute;background-color: #40454d;opacity: .55; position: absolute; left: 0; top: 0; z-index: 1;}
.detail_list .detail_list_content{ display: flex; width:100%; height:100%; position: absolute; left: 0; top: 0; z-index: 2;}
.detail_list .detail_list_img{ width:108px; height: 150px; border: solid 1px #f0f2f3; margin:20px;}
.detail_list .detail_list_img img{ width:100%; height: 100%;}
.detail_list .detail_list_info{ margin-top: 20px;}
.detail_list .detail_list_info h2{ font-size: 20px; color:white; font-weight: normal; line-height: 40px;}
.detail_list .detail_list_info p{ color:white; line-height: 20px; font-size: 14px; color:#ccc;}

#content .detail_intro{ padding: 10px;}
#content .detail_player{ margin:20px;}
.detail_player .swiper-slide{ width:70px; margin-right: 20px; text-align: center; font-size: 14px;}
.detail_player .swiper-slide img{ width:100%; margin-bottom: 5px;}
.detail_player .swiper-slide p:nth-of-type(2){ color:#999;}

</style>
